import { useAtomValue } from "jotai";
import { currentRouteAtom } from "../../components/Layout";
import { useAPI } from "../../hooks/useAPI.ts";
import { useState } from "react";
import { useQuery } from "react-query";
import { css } from "@emotion/css";
import { Button, Form, Input, Table, Typography } from "@arco-design/web-react";

export default function SystemRole() {
  const route = useAtomValue(currentRouteAtom);

  const api = useAPI();
  const [pageSize, onPageSizeChange] = useState(10);
  const [page, setPage] = useState(0);
  const [userName, setUserName] = useState("");
  const { data: systemRoleList, isLoading } = useQuery(
    ["query-system-role-list", pageSize, page, userName],
    async () => {
      const { data } = await api.getSystemRoleList({
        roleName: userName,
      });
      return data.data;
    },
  );

  return (
    <div>
      <div
        className={css`
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
        `}
      >
        <Typography.Title heading={6} style={{ margin: "0 0 20px 0" }}>
          {route?.meta.title}
        </Typography.Title>
        <Button type="primary" size="small">
          添加角色
        </Button>
      </div>
      <Form layout="inline" className={css``}>
        <Form.Item field="搜索" label="搜索">
          <Input
            onChange={(e) => setUserName(e)}
            placeholder="搜索内容"
            style={{ width: "200px" }}
          />
        </Form.Item>
      </Form>
      <Table
        className={css`
          margin-top: 16px;
        `}
        loading={isLoading}
        data={systemRoleList?.rows}
        pagination={{
          sizeCanChange: true,
          onPageSizeChange,
          pageSize,
          current: page,
          onChange: setPage,
          total: systemRoleList?.total,
        }}
        columns={[
          {
            title: "序号",
            dataIndex: "roleId",
          },
          {
            title: "角色名称",
            dataIndex: "roleName",
          },
          {
            title: "权限字符",
            dataIndex: "roleKey",
          },
          {
            title: "操作",
          },
        ]}
      />
    </div>
  );
}
